<template>
    <div class="seleConutry">
        <x-header>
            <div slot="default" class="common__header--title">出行目的地</div>
            <div @click="closeSele()" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/close1.png" class="go-back">
            </div>
            <div @click="closeSele()" slot="right" class="common__header--title">确认</div>
        </x-header>
        <group class="seleCountry__group">
            <cell @click.native="changeCountry('1')" class="item--all" title="全球"></cell>
            <cell @click.native="changeCountry('2')" class="item--sc" title="申根"></cell>
        </group>
        <!-- <picker :data='countryList' v-model='seleCon'></picker> -->
        <div style="height:50vh !important" class="testtesttest">
            <!-- <vue-scroller ref="scroller" :snapping="snapping" :snap-height="snapHeight" :animationDuration="animationDuration" style="position: inherit;height:50vh !important"> -->
            <scroller lock-x scrollbar-y height="50vh" ref="scroller">
                <div>
                    <cell :style="getStyle(item.name)" :class="getItemId(index)" @click.native="pushSeleCountry(item.value,index)" v-for="(item, index) in countryList[0]" :key="index" :title="item.name">
                        <span :id="getItemId(index)" :title="index*48"></span>
                    </cell>
                </div>
            </scroller>
            <!-- </vue-scroller> -->
        </div>
        <group style="box-shadow: 0px 0px 10px 1px #777777;">
            <group-title>已选择</group-title>
            <div class="details__dialog--btnlist">

                <checker radio-required default-item-class="seleCou-item" selected-item-class="seleCou-item-selected">
                    <checker-item @click.native="deleteSeleCon(i)" :value="item" v-for="(item,i) in showCountry" :key="i">{{item}}</checker-item>
                </checker>

            </div>
        </group>
        <div class="pinyinlist__navigation--right">
            <ul>
                <li>
                    <!-- <img src="~assets/x3/ico/frist.png"></a> -->
                </li>
            </ul>
        </div>
        <div id="pinyinlist__navigation--letter"></div>
    </div>
</template>



<script>
import PinYin from 'src/common/util/pinyin';
import { Cell, Group, XHeader, Picker, GroupTitle, XButton, Checker, CheckerItem, Scroller } from 'vux'
import { RequestUrl } from "src/common/url";
import { mapState, mapActions } from "vuex";
import {
    Mutations
} from "src/common/const";
export default {
    components: {
        Picker,
        GroupTitle,
        XButton,
        Cell,
        Group,
        XHeader,
        Checker,
        CheckerItem,
        Scroller
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        indexSeleCountry: "seleCountry",
        isWeChar: "isWeChar",
        showSeleCountry: "showSeleCountry"
    }),
    methods: {
        // getItemTop(index) {
        //     return (index + 1) * 100;// Math.ceil($("#item--" + index).offset().top);
        // },
        getStyle(name) {
            // let test = this.showCountry;

            let data = this.showCountry[name];
            if (typeof (data) == "undefined" || data == "undefined") {
                return "color:#000;";
            } else {
                return "color:#C8161D;";
            }

            // if (this.showCountry.length > 0) {
            //     let aa = []
            //     let bb = aa['aaa'];
            // }
        },
        getItemId(index) {
            return "item--" + index;
        },
        deleteSeleCon(index) {
            let newSeleConList = [];
            let newShowCountry = [];
            for (let i = 0; i < this.seleConList.length; i++) {
                if (i != index) {
                    newSeleConList.push(this.seleConList[i]);
                    newShowCountry.push(this.showCountry[i]);
                }
            }
            // this.setStyle(this.seleConList[index].split(",")[0]);
            // $("#item--" + index).css("color", "#000");
            this.seleConList = newSeleConList;
            this.showCountry = newShowCountry;
        },
        init() {
            let _vueThis = this;
            let navigation = $('.pinyinlist__navigation--right');
            navigation.find('ul').append(PinYin.getPinYinListNotA());
            $(".pinyinlist__navigation--right ul li").click(function () {


                let LetterBox = $('#pinyinlist__navigation--letter');
                let _this = $(this);
                LetterBox.html(_this.html()).fadeIn();
                navigation.css('background', 'rgba(145,145,145,0.6)');
                let index = _this.html();
                console.log(index);


                let st = _vueThis.fristAll[index];
                // console.log(st);
                console.log($("#item--" + st));
                if (typeof (st) != "undefined") {
                    let top = $("#item--" + st)[0].title;
                    _vueThis.$nextTick(() => {
                        _vueThis.$refs.scroller.reset({
                            top: 0
                        })
                    })
                    _vueThis.$nextTick(() => {
                        _vueThis.$refs.scroller.reset({
                            top: top
                        })
                    })
                }
                setTimeout(function () {
                    navigation.css('background', 'rgba(145,145,145,0)');
                    LetterBox.fadeOut();
                }, 1000);
            })
        },
        changeCountry(type) {
            // this.seleType = type;
            if (type == "1") {
                this.pushSeleCountry("全球,GLOBAL", 999);
                // this.countryList = this.all;
            } else {
                this.pushSeleCountry("申根,SCHENGEN STATES", 998);
                // this.countryList = this.schengen;
            }
            // this.setClick();
            // this.setStyle();
        },
        pushSeleCountry(data, index) {
            if (!this.getCurSeleString(data)) {
                this.seleConList.push(data);
                this.showCountry.push(data.split(",")[0]);
                if (index == 999) {
                    $(".item--all").css("color", "#C8161D");
                } else if (index == 998) {
                    $(".item--sc").css("color", "#C8161D");
                } else {
                    $(".item--" + index).css("color", "#C8161D");
                }
            }
        },
        setShowCountry() {
            let newShowCou = [];
            for (let i = 0; i < this.seleConList.length; i++) {
                newShowCou.push(this.seleConList[i].split(",")[0]);
            }
            this.showCountry = newShowCou;

        },
        setClick() {
            let _this = this;
            setTimeout(function () {
                // alert("setTimeout");
                $(document).on('click', '.scroller-indicator', function () {
                    if (!_this.getCurSeleString(_this.seleCon[0])) {
                        _this.pushSeleCountry(_this.seleCon[0]);
                    }
                    // _this.setStyle();
                });

            }, 100);
        },
        // setStyle(value) {
        //     let _this = this;
        //     setTimeout(function () {
        //         $(".vux-label").each(function () {
        //             let html = $(this).html();
        //             if (value == $(this).html()) {
        //                 $(this).css("color", "#000");
        //             }
        //         });
        //     }, 0);
        // },
        getCurSeleString(value) {
            let curString = "";
            for (let i = 0; i < this.seleConList.length; i++) {
                curString += this.seleConList[i] + ",";
            }

            if (curString.indexOf(value) >= 0) {
                return true;
            } else {
                return false;
            }
        },
        closeSele() {
            this.$emit('closeShowCount')
        }

    },
    watch: {
        showSeleCountry(cur, old) {
            if (cur == false) {
                let saveList = [];
                for (let i = 0; i < this.seleConList.length; i++) {
                    let array = this.seleConList[i].split(",")
                    let add = {
                        cName: array[0],
                        eName: array[1]
                    }
                    saveList.push(add);
                }
                let parm = {
                    seleCountry: saveList
                };
                this.$common.storeCommit(this, Mutations.INSURE_CURPRICE, parm);
            } else {
                let newSeleConList = [];

                for (let i = 0; i < this.indexSeleCountry.length; i++) {
                    newSeleConList.push(this.indexSeleCountry[i].cName + "," + this.indexSeleCountry[i].eName);
                }
                this.seleConList = newSeleConList;
                this.setShowCountry();
            }
        }

    },
    data() {
        return {
            selePlanId: [],
            spPlans: ['中国', '台湾'],
            countryList: [],
            year4: ['2002'],
            all: [],
            seleCon: [],
            schengen: [],
            seleConList: [],
            showCountry: [],
            fristAll: {},
            fristSchengen: {},
            seleType: "1",
            snapping: true,
            snapHeight: 50,
            animationDuration: 150,
            items: [],
        }
    },
    mounted() {
        for (let i = 1; i < 100; i++) {
            this.items.push(i + ' - keep walking, be 2 with you.')
        }
        if (this.saveInsure.eleShow.abroadDestination) {
            this.init();
            let _this = this;
            let parmm = {
                isAbroadTravel: this.saveInsure.eleShow.abroadDestination,
                _this: this,
                planId: this.detailsStore.curSelePlan.planId
            }
            this.$common.storeCommit(this, "DETAILSS_SAVE_TEST1", parmm);
            // $.ajax({
            // type: "POST",
            // url: RequestUrl.GET_SELE_COUNTRY,
            // success: function(res, status, xhr) {

            // this.$http.post(RequestUrl.GET_SELE_COUNTRY)
            //     .then(function(res) {
            //         let all = [];
            //         //所有国家
            //         let allData = [];
            //         let schengenData = [];
            //         let pinYinAll = "";
            //         let pinYinSchengen = "";
            //         for (let i = 0; i < res.result.length; i++) {

            //             let add = res.result[i].codeCname1 + "," + res.result[i].codeEname1;
            //             allData.push({
            //                 name: res.result[i].codeCname1,
            //                 value: add
            //             });
            //             if (pinYinAll != res.result[i].codeType2) {
            //                 pinYinAll = res.result[i].codeType2;
            //                 _this.fristAll[pinYinAll] = add;
            //             }
            //             if (res.result[i].code1 == "Schengen-States") {
            //                 if (pinYinSchengen != res.result[i].codeType2) {
            //                     pinYinSchengen = res.result[i].codeType2;
            //                     _this.fristSchengen[pinYinSchengen] = add;
            //                 }
            //                 schengenData.push({
            //                     name: res.result[i].codeCname1,
            //                     value: add
            //                 });
            //             }
            //         }
            //         _this.all.push(allData);
            //         _this.schengen.push(schengenData);
            //         _this.countryList = _this.all;
            //         _this.setClick();
            //     })
            //     }
            // });
            this.$init.subPageInit(this);

        }


    }
}
</script>


<style lang="scss" >
.seleCountry__group {
  margin-top: -10px;
  box-shadow: 0px 0px 5px 1px #777777;
}

.details__dialog--btnlist {
  padding: 10px 15px; // width: max-content;
  text-align: center;
}

.seleCou-item-selected {
  border: 2px solid #C8161D;
  border-radius: 3px;
  background: #ffffff url(~assets/x3/ico/close.png) no-repeat right top;
  margin-bottom: 5px;
}

.seleCou-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
  margin: 0px 3px;
  font-size: 14px;
  background: #ffffff url(~assets/x3/ico/close.png) no-repeat right top;
  margin-bottom: 5px;
}

.pinyinlist__navigation--right {
  position: fixed;
  top: 47px;
  right: 0px; // height: 100%;
  // width: 15px;
  padding-right: 10px;
  text-align: center;
  font-size: 12px;
  z-index: 99;
  background: rgba(145, 145, 145, 0);
}

.pinyinlist__navigation--right li img {
  width: 14px;
}

ul li {
  margin-bottom: -4px;
  list-style: none;
  a {
    color: #000;
  }
}

#pinyinlist__navigation--letter {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  font-size: 75px;
  color: #555;
  text-align: center;
  line-height: 100px;
  background: rgba(145, 145, 145, 0.6);
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -50px 0px 0px -50px;
  z-index: 99;
  display: none;
}

#pinyinlist__navigation--letter img {
  width: 50px;
  height: 50px;
  float: left;
  margin: 25px 0px 0px 25px;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>
